<template>
<view class="empty-container">
        <view class="empty-icon">
            <view class="image-container">
                <view class="image"></view>
            </view>
        </view>
        <view class="empty-text">{{ props.description}}</view>
    </view>
</template>

<script setup lang="ts">
  interface IEmptyProps {  
      description: string;  
  }  
  const props = withDefaults(defineProps<IEmptyProps>(), {  
      description: '暂无数据'  
  });
</script>

<style scoped lang="scss">
    .empty-container {
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               // height: 100vh;
           }
   
           .empty-icon {
               margin: 0 16upx;
               height: 200upx;
               position: relative;
           }
   
           /* 图形容器 */
           .image-container {
               height: 100%;
               display: flex;
               align-items: center;
               justify-content: center;
           }
   
           /* 主体图形 */
           .image {
               width: 184upx;
               height: 152upx;
               background-image: url('');
               background-repeat: no-repeat;
               background-position: center;
               background-size: 100%;
           }
   
           .empty-text {
               color: rgba(0, 0, 0, 0.25);
               font-size: 14px;
               line-height: 1.5715;
               text-align: center;
           }
</style>